<template>
     <div class="star" :class="`star-${size}`">
                          <span class="star-item" v-for="(c,index) in StarClass" :key="index" :class="c"></span>
                          <!-- <span class="star-item on"></span>
                          <span class="star-item on"></span>
                          <span class="star-item half"></span>
                          <span class="star-item off"></span> -->
     </div>
</template>

<script>
const ON='on'
const HALF='half'
const OFF='off'
export default {
    props: {
       score:{
           type:Number
       },
       size:{
           type:Number
       }
    },
    data() {
        return {

        };
    },
    computed: {
        StarClass(){
            // 依据评价来计算星星 
            let starArr=[]
            let {score}=this   
            let intNum=Math.floor(score)
            for(var i=0;i<intNum;i++){
                starArr.push(ON)
            }
            // 在js里面 0.1+0.2不等于0.3 小数不能做计算
            // 在js里面 尽量不要直接用小数进行计算 采用整数进行计算更加严谨
            if(score*10-intNum*10>5){
                starArr.push(HALF)
            }
            while(starArr.length<5){
                starArr.push(OFF)
            }
            return starArr
        }
    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {

    },
    components: {

    },
};
</script>

<style scoped  lang='stylus' >
@import '../../common/stylus/mixins.styl'
 .star //2x图 3x图
                            float left
                            font-size 0
                            .star-item
                              display inline-block
                              background-repeat no-repeat
                            &.star-48
                              .star-item
                                width 20px
                                height 20px
                                margin-right 22px
                                background-size 20px 20px
                                &:last-child
                                  margin-right: 0
                                &.on
                                  bg-image('./images/stars/star48_on')
                                &.half
                                  bg-image('./images/stars/star48_half')
                                &.off
                                  bg-image('./images/stars/star48_off')
                            &.star-36
                              .star-item
                                width 15px
                                height 15px
                                margin-right 6px
                                background-size 15px 15px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('./images/stars/star36_on')
                                &.half
                                  bg-image('./images/stars/star36_half')
                                &.off
                                  bg-image('./images/stars/star36_off')
                            &.star-24
                              .star-item
                                width 10px
                                height 10px
                                margin-right 3px
                                background-size 10px 10px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('./images/stars/star24_on')
                                &.half
                                  bg-image('./images/stars/star24_half')
                                &.off
                                  bg-image('./images/stars/star24_off')
</style>
